<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>商城-忘记密码</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {
			background-color: #F5F5F5;
		}

		.aui-bar-nav .aui-pull-left {
			padding: 0 0.25rem;
		}

		.aui-list {
			padding: 0 0.75rem;
		}

		.aui-title {
			font-size: .9rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #ffffff;
		}

		.aui-list-item- {
			height: 2.5rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.aui-list-item-label- img {
			width: 1rem;
		}

		.aui-btn-block {
			width: 17.25rem;
			height: 2.3rem;
			line-height: 2.3rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: linear-gradient(135deg, rgba(132, 229, 255, .3) 0%, rgba(107, 180, 255, .3) 100%, rgba(122, 174, 229, .3) 100%);
			border-radius: 1.15rem;
			text-align: center;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.aui-btn {
			border-radius: 0.25rem;
		}

		.aui-text-linear {
			position: relative;
			background: linear-gradient(-152deg, #ee02fd, #9972e6);
			background: -webkit-linear-gradient(-152deg, #ee02fd, #9972e6);
			/*color: transparent;*/
			color: #005A93
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		::placeholder {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
		}

		.wraper {
			padding: 0 0.75rem;
			background: #ffffff;
		}

		.wraper>div:nth-child(1) {
			/*padding: 1.35rem 0 0 0;*/
			height: 3.25rem;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
		}

		.copy {
			height: 2.75rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
		}



		.bg_opacity {
			opacity: 1
		}

		.tips_psw {
			margin-top: 0.5rem;
			margin-left: 0.75rem;
		}
		.next_btn{
			width:17.25rem;
			height:2.3rem;
			line-height: 2.3rem;
			background:rgba(0,90,147,1);
			border-radius:0.3rem;
			text-align: center;
			margin: 2rem auto;
			opacity:0.29;
		}
		.bg_opacity{
			opacity: 1
		}
	</style>
</head>

<body>
	<div id="aui-header" class="ming-bg-blue">
		<header class="aui-bar aui-bar-nav ming-bg-blue aui-border-b">
			<a class="aui-pull-left" tapmode onclick="close_win()" style="padding-left:.75rem;">
				<img class="btn-img-back" src="../../image/btn/btn-back.png" />
			</a>
			<div class="aui-title">
				<div class="" style="font-weight:500;color:rgba(255,255,255,1);">
					忘记密码
				</div>
			</div>
		</header>
	</div>
	<div class="aui-content" id="app" v-cloak="">
		<div class="wraper">
			<div class="">
				<!-- <span style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);line-height:1.05rem;">{{info.mobile}}</span> -->
				<input style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);line-height:1.05rem;height:3.25rem;height:auto;padding-top:1.35rem;" v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号" />
			</div>
			<div class="copy">
				<input v-model="sms_code" type="tel" maxlength="6" placeholder="请输入验证码" style="width:60%;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);" />
				<div class="" style="display:flex;justify-content:space-between;align-items:center">
					<span style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(0,90,147,0.4);opacity:0.29;">{{sms_time}}</span>

					<div class="" v-if="sms_time && current" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(0,90,147,0.4);margin-left:0.6rem;opacity:0.29;">
						获取验证码
					</div>
					<div v-else class="" tapmode onclick="getCode()" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:500;color:#005A93;margin-left:0.6rem;">
						获取验证码
					</div>

				</div>
			</div>
			<!-- 请输入新密码 -->
			<div class="copy">
				<input v-model="pwd" v-bind:type.prop=type placeholder="请输入新密码" style="width:60%;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);" />
				<div class="" style="display:flex;justify-content:space-between;align-items:center">
					<div class="is_show_psw" tapmode onclick='show_pwd()'>
						<img v-if="!is_show" style="display: inline-block;width: 1rem;vertical-align: middle;" src="../../image/icon/icon-noeye.png" />
						<img v-if="is_show" style="display: inline-block;width: 1rem;vertical-align: middle;" src="../../image/icon/icon-eye.png" />
					</div>

				</div>
			</div>

		</div>

		<!-- 密码格式提醒 -->
		<!-- <div class="tips_psw" style="font-size:0.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);line-height:0.9rem;">
			密码由6-20位数字/字母组成，注意区分大小写
		</div> -->
		<!-- 确定按钮 -->
		<!-- 下一步按钮 -->
		<div class="next_btn" style="font-size:0.8rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(255,255,255,1);" tapmode onclick="setPasswd()" :class="{'bg_opacity':mobile!=''&&sms_code!=''&&pwd!=''}">
			确定
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/verify.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			mobile: '',
			pwd: '',
			sms_code: '',
			is_show: false,
			type: 'password',
			sms_time: '',
			
		},
	})
	apiready = function() {
		$api.fixStatusBar($api.byId('aui-header'))
		api.setStatusBarStyle({
			style: 'dark'
		});
	};

	function getCode() {
		if (!isPoneAvailable(vm.mobile)) {
			toast('请输入正确的手机号')
			return;
		}
		if (vm.sended) {
			return;
		}
		
		get_data('api/Sms/sendAuthCode', {
			mobile: vm.mobile,
			flag: 1
		}, function(ret) {
			//从服务器请求验证码并返回结果，如果已发送操作如下：
			if (ret.status == '1') {
				vm.sended = 1;
				var timer = 60;
				vm.sms_time = timer + 's'
				var ti = setInterval(function() {
					timer = timer - 1;
					vm.sms_time = timer + 's';
					if (timer < 0) {
						vm.sended = 0;
						vm.sms_time = '';
						clearInterval(ti);
					}
				}, 1000);
			}
			toast(ret.msg)
		})
	}

	function show_pwd() {
		vm.is_show = !vm.is_show
		if (vm.is_show) {
			vm.type = 'text'
		} else {
			vm.type = 'password'
		}
	}

	function setPasswd() {
		if (vm.sms_code == '' || vm.mobile == '' || vm.pwd == '') {
			return;
		}
		if (vm.sms_code.length != 6) {
			toast('验证码错误');
			return;
		}
		if (!isPoneAvailable(vm.mobile)) {
			toast('请输入正确的手机号')
			return;
		}
		get_data('api/login/setPasswd', {
			token: $api.getStorage('token'),
			password: vm.pwd,
			mobile: vm.mobile,
			authCode: vm.sms_code,
		}, function(ret) {
			if (ret.status) {
				openWin_login()
				setTimeout(function() {
					close_win()
				}, 1000)
			} else {
				toast(ret.msg)
			}
		})
	}
</script>

</html>
